// 柱状图组件
import * as echarts from 'echarts/core'
import { GridComponent, TitleComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { useCallback, useEffect, useRef } from 'react'
echarts.use([GridComponent, TitleComponent, BarChart, CanvasRenderer])

function MyBarChart({ options }) {
  const chartRef = useRef(null) //也可以使用ref，不用原生获取dom方式
  const renderEchart = useCallback(() => {
    // 1. 获取渲染图表的容器（dom元素）
    // const chartDom = document.getElementById('main')
    const chartDom = chartRef.current

    // 2. 初始化图表实例
    const myChart = echarts.init(chartDom)

    // 3. 配置图表选项（参数）
    const option = options

    // 4. 使用图表参数渲染图表
    option && myChart.setOption(option)
  }, [options])

  useEffect(() => {
    // 保证dom可用，再渲染图表
    renderEchart()
  }, [renderEchart])
  return <div ref={chartRef} id="main" style={{ width: '500px', height: '400px' }}></div>
}
export default MyBarChart
